<template>
	<view class="content">
		 <view class="status_bar">
		            
		        </view>
		<image class="loginTop" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/797058c36948412f920410b9a869fc95login-top.png"  mode="aspectFill" ></image>

		<image class="page-head" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/68f7f04869d149ccb8cad93f262d86fflogo.png" mode="heightFix"></image>

		<view class="page-main">
			<view class="form">
				<u--form 
					class="form"
					labelPosition="left"
					:model="formData"
					:rules="rules"
					ref="uForm">
					<u-form-item label="用户名"   prop="username" :labelWidth="130" borderBottom>
						<u--input v-model="formData.username" placeholder="请输入用户名" border="none"/>
					</u-form-item>
					<u-form-item label="密码" class="formfont" prop="password" :labelWidth="130" borderBottom>
						<u--input type="password" v-model="formData.password" placeholder="请输入密码" border="none"/>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn-group">
					<u-button
						type="primary"
						color="linear-gradient(to right, #3f94f7, #3f94f7)"
						:customStyle="{
							fontSize: '36rpx'
						}"
						@click="submitForm"
					>
						登录
					</u-button>
				
			</view>
			<view class="btn-group">
					<u-button
						type="primary"
						color="linear-gradient(to right, #3f94f7, #3f94f7)"
						:customStyle="{
							fontSize: '36rpx'
						}"
						@click="loginbyphone"
					>
						手机号登录
					</u-button>
				
			</view>
			<view class="foot">
				<text>还没有账号？</text>
				<text style="color: #3f94f7;" @click="toRegister">注册</text>
				<text style="float: right;z-index: 100;" @click="toModifyPassword">忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/common/api.js'
	import md5 from '../../utils/MD5.js'
	
	export default {
		data() {
			return {
				formData: {
					username: null,
					password: null
				},
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }
					],
				}
			}
		},
		onLoad() {
             
		},
		methods: {
			loginbyphone(){
				uni.navigateTo({
					url: '/pages/login/loginbyphone'
				})
			},
			toRegister () {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			toModifyPassword () {
				console.log('去修改密码页面')
			},
			
			// 提交数据
			submitForm (e) {
				uni.showLoading({
					mask: true,
					title: '登录中'
				});
				const params = {
					...this.formData,
				}
				login(params).then(res=>{
					uni.showToast({
						title: "登录成功",
						icon: 'none'
					})
					let that=this
					uni.setStorageSync("hasLogin", true);
					
					uni.setStorageSync('userInfo', res.data)
					this.$H.post("user/smsLogin", this.formData).then(r => {
						if (res.code == 200) {
							
							uni.setStorageSync("token", r.token);
							
						}
						})
					
					uni.switchTab({
						url: '/pages/partner/index'
					})
				}).finally(() =>{
					uni.hideLoading();
				})
			
			
		
				// this.$H.post("user/login", this.formData).then(res => {
				// 	if (res.code == 200) {
				// 		console.log(res);
				// 		uni.setStorageSync("hasLogin", true);
				// 		uni.setStorageSync("token", res.token);
				// 		uni.switchTab({
				// 			url: '/pages/partner/index'
				// 		});
				// 	}
				
				// 	uni.hideLoading();
				
				// })
				// this.$refs.uForm.validate().then(valid => {
				// 	if (!valid) {
				// 		return
				// 	}
				// 	uni.showLoading({
				// 		title: '数据提交中...'
				// 	})
				// 	login({
				// 		...this.formData,
				// 		password: md5.hexMD5(this.formData.password)
				// 	}).then(res => {
				// 		uni.showToast({
				// 			title: "登录成功",
				// 			icon: 'none'
				// 		})
				// 		this.$u.vuex('token', res.content.token)
				// 		this.$u.vuex('userInfo', res.content)
				// 		this.linkToDevice()
				// 	}).finally(() => {
				// 		uni.hideLoading()
				// 	})
				// })
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.content {
		background-color: #FFFFFF;
		height: 100vh;
		padding-bottom: 0;
	}
	.loginTop{
	width: 100%;
	  vertical-align: bottom;	
	}
	.page-head {
		
		display: block;
		margin: 0 auto;
		vertical-align: bottom;
		height: 200rpx;
		padding-top: 0rpx;
		
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// font-size: 45rpx;
		// color: #fff;
	}
	.page-main {
		width: 92%;
		margin: 0 auto;
		margin-top: 0rpx;
		background-color: transparent;
	}
	.title {
		
		text-align: center;
	}
	.formfont{
		
	}
	.form {
		font-size: 30rpx;
		width: 88%;
		margin: 0 auto;
		padding-top: 25rpx;
		padding-bottom: 0;
	}
	.btn-group {
		width: 85%;
		margin: 50rpx auto;
		margin-bottom: 20rpx;
	}
	.foot {
		margin: 0 55rpx;
		margin-top: 50rpx;
		margin-bottom: 0rpx;
		font-size: 35rpx;

	}
</style>
